<template>

  <div class="innerContainer">
    <common-title>
      <template #expand>

        <el-button  type="success" @click="search">新增配置</el-button>

        <el-button @click="flushedEvent">刷新缓存</el-button>
      </template>
    </common-title>
    <div class="innerPane">
      <div class="filterArea">
        <el-form :inline="true" :model="filterForm" class="demo-form-inline">
          <el-form-item label="分类编码">
            <el-input v-model="searchForm.cat" placeholder="请输入分类编码" />
          </el-form-item>
          <el-form-item label="配置Code">
            <el-input v-model="searchForm.key" placeholder="请输入配置Code" />
          </el-form-item>

          <el-form-item label="配置Value">
            <el-input v-model="searchForm.value" placeholder="请输入配置Value" />
          </el-form-item>

          <el-form-item>

            <el-button plain type="primary" @click="search">查询</el-button>
            <el-button plain @click="onClear">重置</el-button>

          </el-form-item>
        </el-form>
      </div>

      <el-table :data="tableData" border row-key="id" style="width: 100%; " :cell-style="{ textAlign: 'center' }"
        row-class-name="fixed-row">

        <el-table-column header-align="center" prop="cat" label="分类编码" width="180" />
        <el-table-column header-align="center" prop="value" label="属性Code" width="200" />
        <el-table-column header-align="center" prop="text" label="属性Value" width="220" />
        <el-table-column header-align="center" prop="remark" label="备注" />

        <el-table-column label="操作" header-align="center" width="180" prop="col9">
          <template #default="scope">
            <el-link plain type="primary" size="small" @click="edit(scope.$index, scope.row)">编辑</el-link>

            <el-link plain type="danger" size="small" @click="del(scope.row.id)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination class="pagination" :current-page="searchForm.current" :page-size="searchForm.size"
        :page-sizes="[10, 50, 100, 200]" layout="->,total, sizes, prev, pager, next, jumper" :total="total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
  <detail-setting ref="detailSetting" />
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import CommonTitle from "@/components/CommonTitle.vue";
import { onMounted, reactive, ref } from "vue";

import { syspropsList, syspropsSave, syspropsDel, syspropsFlushed } from "../../utils/requests";


let total = ref(0);
// 用户数据
let tableData = ref([]);

// 搜索条件
const searchForm = reactive({
  current: 1,
  size: 10,
  cat: null,
  key: null,
  value: null,
});

// Dom 挂载之后
onMounted(async () => {
  search();
});


const onClear = () => {
  Object.assign(searchForm, {
    current: 1,
    size: 10,
    cat: null,
    key: null,
    value: null,
  });
  search();
};

const handleSizeChange = (size) => {
  searchForm.size = size;
  searchForm.current = 1;
  search();
};

const handleCurrentChange = (current) => {
  searchForm.current = current;
  search();
};

const search = () => {
  syspropsList(searchForm).then((res) => {
    tableData.value = res.records;
    total.value = res.total;
  });
};


// 删除用户
const flushedEvent = () => {
  ElMessageBox.confirm("确定要刷新缓存吗?", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const res = await syspropsFlushed();

    debugger;
    if (res.code === 1200) {
      ElMessage.success("刷新成功");
      search();
    } else {
      ElMessage.error("刷新失败");
    }
  })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消刷新",
      });
    });
};
</script>

<style scoped></style>
